---
title: Radio
description: "Radio buttons allow users to select one option from a set. Use radio buttons to: Select a single option from a list, expose all available options, etc."
docType: Demo
docGroup: Components
group: Inputs
hooks: [useRadioGroup]
components: [Radio]
---

# Radio

[Radio buttons](https://m2.material.io/components/radio-buttons#usage) allow users to select one option from a set.
Use radio buttons to:

- Select a single option from a list
- Expose all available options

If available options can be collapsed, consider using a [Select](/components/select) or [NativeSelect](/components/native-select) instead, as it uses less space.

## Simple Radio

A `Radio` should normally be placed within a `Form` and provide a `value`, `name`, and `label`.

```demo source="./SimpleRadio.tsx"

```

### Icon After Label

The label can be placed before the radio icon by enabling the `iconAfter` prop.

```demo source="./IconAfterLabel.tsx"

```

### Stacked Radio

The label can be stacked above or below the radio by enabling the `stacked` prop.

```demo source="./StackedRadio.tsx"

```

## Radio Sizes

The `Radio` has multiple sizes: `normal` (default), `small`, `dense`,
and `large`. The size can also be set to `auto` which will update the checkbox
to match the current font size.

```demo source="./RadioSizes.tsx"

```

## Radio States

The `Radio` also has different states that can be applied. The most common
will be the `error` or `disabled` states but also supports `active`.

```demo source="./RadioStates.tsx"

```

## Controlling Radios

The state for the radio group will generally be controlled so that something can
be done with the selected value. `react-md` provides a helper hook: `useRadioGroup`
to control the state.

> !Info! Typescript users can strictly type the `value` and `getRadioProps` by
> providing a [type parameter](https://www.typescriptlang.org/docs/handbook/2/generics.html)
> or inferring the type from the `defaultValue` (if possible).

```demo source="./ControllingRadios.tsx"

```

### Required Radio Group

In the rare case where a list of available options must be presented to the user
without an option being selected by default, the `required` option can be
enabled which will prevent form submission until one has been selected.

```demo source="./RequiredRadioGroup.tsx"

```

## Custom Icons

The `Radio` component will use the
[radio](/customization/icon-config#radio) and
[radioChecked](/customization/icon-config#radioChecked) icons from the
`ICON_CONFIG` by default.

```demo source="./CustomIcons.tsx"

```

## Radio with Messages

The `Radio` component is wrapped in the
[FormMessageContainer](/components/form-message#form-message-container) so additional
hint or error messages can be displayed.

```demo source="./RadioWithMessages.tsx"

```
